.page-con {
	padding-bottom: 30rpx;
}
.title-containers {
	padding: 0px 20px 30px;
}

.title {
	font-size: 33rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: rgba(0, 0, 0, 1);
	margin-left: 24rpx;
	padding-top: 20px;
	padding-bottom: 3px;

	.title-p {
		font-size: 27rpx;
		font-weight: 400;
		color: rgba(136, 136, 136, 1);
	}
}

.stage {
	padding-left: 22rpx;
	perspective: 3000rpx;
	perspective-origin: 50% 50%;

}

.wrapper {
	height: 350rpx;
	transform-style: preserve-3d;
	position: relative;
}

.imgBasic {
	position: absolute;
	width: 630rpx;
	height: 320rpx;
	border-radius: 20rpx;

	button {
		width: 100%;
		height: 100%;
		background-color: transparent;
	}
}

.img_box:nth-child(1) {
	left: 0;
	z-index: 6;
	transform: scale(1);
	-webkit-transform: scale(1);
}

.img_box:nth-child(2) {
	left: 75rpx;
	z-index: 5;
	transform: scale(0.9);
	-webkit-transform: scale(0.9);
}

.img_box:nth-child(3) {
	left: 140rpx;
	z-index: 4;
	transform: scale(0.8);
	-webkit-transform: scale(0.8);
}

@keyframes imgleft1 {
	from {
		transform: scale(1);
		-webkit-transform: scale(1);
		left: 0rpx;
		z-index: 6;
		opacity: 1;
	}

	to {
		transform: scale(1);
		-webkit-transform: scale(1);
		left: -560rpx;
		z-index: 6;
		opacity: 0;
	}
}

@keyframes imgleft2 {
	from {
		transform: scale(0.9);
		-webkit-transform: scale(0.9);
		left: 75rpx;
		z-index: 5;
	}

	to {
		transform: scale(1);
		-webkit-transform: scale(1);
		left: 0rpx;
		z-index: 6;
	}
}

@keyframes imgleft3 {
	from {
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
		left: 140rpx;
		z-index: 4;
	}

	to {
		transform: scale(0.9);
		-webkit-transform: scale(0.9);
		left: 75rpx;
		z-index: 5;
	}
}

@keyframes imgright1 {
	to {
		transform: scale(1);
		-webkit-transform: scale(1);
		left: 0rpx;
		z-index: 6;
		opacity: 1;
	}

	from {
		transform: scale(1);
		-webkit-transform: scale(1);
		left: -560rpx;
		z-index: 6;
		opacity: 0;
	}
}

@keyframes imgright2 {
	to {
		transform: scale(0.9);
		-webkit-transform: scale(0.9);
		left: 75rpx;
		z-index: 5;
	}

	from {
		transform: scale(1);
		-webkit-transform: scale(1);
		left: 0rpx;
		z-index: 6;
	}
}

@keyframes imgright3 {
	to {
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
		left: 140rpx;
		z-index: 4;
	}

	from {
		transform: scale(0.9);
		-webkit-transform: scale(0.9);
		left: 75rpx;
		z-index: 5;
	}
}


.imgleft1 {
	animation: imgleft1 800ms ease;
	-webkit-animation: imgleft1 800ms ease;
}

.imgleft2 {
	animation: imgleft2 800ms ease;
	-webkit-animation: imgleft2 800ms ease;
}

.imgleft3 {
	animation: imgleft3 800ms ease;
	-webkit-animation: imgleft3 800ms ease;
}

.imgright1 {
	animation: imgright1 800ms ease;
	-webkit-animation: imgright1 800ms ease;
}

.imgright2 {
	animation: imgright2 800ms ease;
	-webkit-animation: imgright2 800ms ease;
}

.imgright3 {
	animation: imgright3 800ms ease;
	-webkit-animation: imgright3 800ms ease;
}

/* .imgleft1{
    animation: imgleft1 200ms ease;
 -webkit-animation: imgleft1 200ms ease;
}
.imgleft2{
   animation: imgleft2 0s ease;
 -webkit-animation: imgleft2 0s ease;
}
.imgleft3{
 animation: imgleft3 0s ease;
 -webkit-animation: imgleft3 0s ease;
}
.imgright1{
    animation: imgright1 20s ease;
 -webkit-animation: imgright1 20ms ease;
}
.imgright2{
   animation: imgright2 0ms ease;
 -webkit-animation: imgright2 0ms ease;
}
.imgright3{
 animation: imgright3 800ms ease;
 -webkit-animation: imgright3 800ms ease;
} */
